<template>
  <div>
    <Header ref="header" :active="4" v-on:headerCallBack="headCall"/>

    <div class="solution-content">
      <div class="banner">
        <img  src="../../static/image/solution-banner.png">
        <div class="common-width">
          <div class="banner-word">
            <h1>{{solutionDetails.title}}</h1>
            <h5>{{solutionDetails.description}}</h5>
            <button @click="linkUs()">联系我们</button>
          </div>
        </div>
      </div>
      <!-- -->
      <div   class="news-details">
        <div class="common-width title">{{solutionDetails.title}}</div>
        <div class="common-width time">{{ dateFormat(solutionDetails.gmtCreate,'yyyy-MM-dd ')}}</div>

        <div class="common-width"> <el-divider></el-divider></div>
        <div class="common-width content">
          <div class="fl content-desc" :style="{width:teamWidth+'px'}" v-html="solutionDetails.content"></div>
          <div class="fr content-list" ref="content-list">
            <div class="content-list-header">其他解决方案</div>
            <el-divider></el-divider>
            <div class="item" v-for=" item in rightMenu" v-if="item.id!=checkId">
              <div class="title"><a @click="solutionDetail(item.id,rightMenu)">{{item.title}}</a></div>
              <div class="desc">有效提高医生诊断、编辑病历、病历质控和科研 统计等的工作质量和效率。</div>
            </div>
          </div>
        </div>
      </div>
      <div class="cooperative-resources">
        <img src="../../static/image/cooperative-resources.png">
      </div>



    </div>
    <Footer/>
  </div>
</template>
<script>

  import Header from '@/components/Header'
  import Footer from '@/components/Footer'
  import {formatDate} from '@/utils/global'

  export default {
    components: {Header, Footer},
    filters: {},
    data() {
      return {
        id: undefined,
        teamWidth: 0,
        submenuRight:0,
        solution:[],
        solutionDetails: {},
        rightMenu:{},
        checkId:120,
        aCheckedId:undefined
     }
    },
    mounted() {


    },
    watch: {
      "$route": "reload"    //后面是methods中的一个方法
    },
    created() {

      this.id = this.$route.params && this.$route.params.id;
      let _self = this;
      if(this.id!=null){
        this.checkId = this.id;
      }
      _self.$store.dispatch('solutionDetail', {ids:this.id}).then(response => {
        this.solutionDetails = response.data;
      }).catch(() => {
      })
      this.teamWidth = 1190 - 465-140;

      _self.$store.dispatch('solution', {}).then(response => {
        this.solution = response.data;
        this.rightMenu=this.solution[0] .contentArticles;

        // if(this.id!=null) {
        //   for (let j in this.solution){
        //     for (let i in this.solution[j].contentArticles) {
        //
        //       if (this.solution[j].contentArticles[i].id == this.id) {
        //         this.solutionDetail(this.id, this.solution[j].contentArticles[i]);
        //       }
        //     }
        // }
        // }
      }).catch(() => {
      })


    },
    methods: {
      headCall(data){
        this.submenuRight = (data.bodyWidth-data.headerLeftWidth-data.headerRightWidth)/2-(1260-data.headerLeftWidth-data.headerRightWidth)/2+20;

      },
      fetchData() {

        let _self = this;
        _self.$store.dispatch('statisticsProjectStatus', {}).then(response => {
          _self.list = response.data;
          _self.total = response.count;
        }).catch(() => {
        })

        // setTimeout(function () {
        //   _self.fetchPermissionTreeData();
        // },500)
      },
      solutionDetail(id,item){
        this.aCheckedId = id;
        this.rightMenu = item;
        this.checkId = id;
        let _self = this;
        _self.$store.dispatch('solutionDetail', {ids:id}).then(response => {
          this.solutionDetails = response.data;
        }).catch(() => {
        })
      },
      linkUs() {
        this.$refs.header.showLinkUs();
      },
      dateFormat(d, fmt) {
        return formatDate(d, fmt);
      }
    }
  }

</script>
<style>
  /*a:hover {*/
    /*background-color: #f1fdff;*/
  /*}*/
</style>
